<route lang="json5" type="taskDetail">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '任务详情',
  },
}
</route>
<template>
  <view class="task-detail_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('taskDetail.viewVoyageTask') }}</text>
    </view>
    <view class="top_box">
      <img src="../../static/images/freighter.png" />
      <view class="msg_box">
        <text>IKEBANA 38SF</text>
        <text>
          {{ t('service.expected') }}2024-09-22 06:00:00{{ t('service.address') }}Qingdao Pt
        </text>
      </view>
    </view>
    <view class="tabs">
      <view class="tab-items" id="tabs">
        <view
          :class="{ item: true, active: item.path === active }"
          v-for="(item, index) in tabs"
          :key="index"
          @click="tabClick(item.path)"
        >
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'TaskDetail',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const tabs = reactive([
  { path: '_0', title: computed(() => t('taskDetail.detail')) },
  { path: '_1', title: computed(() => t('taskDetail.arriving')) },
  { path: '_2', title: computed(() => t('taskDetail.droppedAnchor')) },
  { path: '_3', title: computed(() => t('taskDetail.berthed')) },
  { path: '_4', title: computed(() => t('taskDetail.quarantine')) },
  {
    path: '_5',
    title: computed(() => t('taskDetail.jointInspectionFormality')),
  },
  { path: '_6', title: computed(() => t('taskDetail.draftSurvey')) },
  {
    path: '_7',
    title: computed(() => t('taskDetail.loadAndUnload')),
  },
  { path: '_8', title: computed(() => t('taskDetail.shifting')) },
  { path: '_9', title: computed(() => t('taskDetail.departure')) },
  {
    path: '_10',
    title: computed(() => t('taskDetail.certificate')),
  },
  { path: '_11', title: computed(() => t('taskDetail.SOF')) },
  { path: '_12', title: computed(() => t('taskDetail.worksheet')) },
])
let active = ref('_0')
const tabClick = (name) => {
  active.value = name

  let doc = document.getElementById('app')
  doc.scrollTop = document.getElementById(name).offsetTop - 70
}
</script>
<style lang="scss" scoped>
.pd-l-30 {
  padding-left: 30rpx !important;
}
.pd-r-30 {
  padding-right: 30rpx !important;
}
.task-detail_container {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #f8f9fb;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .top_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 26rpx 140rpx;
    font-size: 22rpx;
    color: #fff;
    background-color: #295699;
    border: none;
    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 80rpx;
      margin-right: 20rpx;
      transform: translateY(-50%);
    }
    .msg_box {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      color: #6689c0;
      text {
        margin-bottom: 4rpx;
        &:nth-child(1) {
          font-size: 26rpx;
          color: #fff;
        }
      }
    }
  }
  .tabs {
    border-top: 13px solid #f2f2f2;
    border-bottom: 13px solid #f2f2f2;

    .tab-items {
      width: 100%;
      overflow-x: auto;
      /*scroll-behavior: smooth;*/
      display: flex;
      height: 50px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
      background-color: #fff;
      align-items: center;
      position: sticky;
      position: -webkit-sticky;
      top: 0px;
      z-index: 10;
      scrollbar-height: none; /* 隐藏滚动条（Firefox） */
      &::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
      }
      .item {
        color: rgb(15, 159, 159);
        height: 100%;
        line-height: 50px;
        box-sizing: border-box;
        text {
          color: rgb(15, 159, 159);
          word-break: normal;
          width: auto;
          display: block;
          word-wrap: break-word;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          padding: 0 10px;
        }
      }
      .item.active {
        color: rgb(76, 123, 192);
        border-bottom: 2px solid rgb(76, 123, 192);
        line-height: 48px;
        font-size: 16px;
      }
    }
  }
}
</style>
